<template>
  <div class="content-wrap bgf">
    <van-nav-bar title="选择朋友" left-text="取消" @click-left="$router.go(-1)">
    </van-nav-bar>
    <van-cell-group>
      <van-cell title="选择密群" is-link :to="{name: 'groupSelect', params: {id: $route.params.id}}" size="large" />
    </van-cell-group>

    <van-index-bar>
      <van-index-anchor index="A" />
      <div class="message-item friend-item" v-for="i in 100" :key="i">
        <div class="avatar"></div>
        <div class="content">
          <p class="name">
            <span>哈哈</span>
          </p>
        </div>
      </div>
    </van-index-bar>

    <van-dialog v-model="sendWindowShow" show-cancel-button>
      <div class="sendWindow-wrap">
        <div class="title">发送给：</div>
        <user-msg-box></user-msg-box>

        <div class="desc">群名片：【啊哈哈】</div>

        <div class="msg-box">
          <input type="text" placeholder="给朋友留言">
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
  export default {
    name: 'selectFriend',
    data () {
      return {
        sendWindowShow: false
      }
    }
  }
</script>

<style scoped lang="scss">
  .van-index-bar {
    overflow: auto;
    margin-top: .6rem;
  }

  .sendWindow-wrap {
    width: 6rem;
    border-radius: 6px;
    padding: .3rem;

    .title {
      font-size: .3rem;
      color: #333;
      font-weight: bold;
      margin-bottom: .3rem;
    }

    .desc {
      color: #999;
      padding: .2rem 0;
      border-top: 1px solid #f0f0f0;
    }

    .msg-box {
      border: 1px solid #f0f0f0;
      border-radius: 4px;
      padding: 0 .14rem;
      margin: .2rem 0;
      input {
        height: .6rem;
        width: 100%;
      }
    }
  }
</style>
